<template>
  <view class="">
    <view class="bg-white mb-12">
      <view class="user-info flex items-center p-16 hair--b" @click="navigateTo('/pages/user/info')">
        <image class="user-avatar" :src="user.headimgurl || avatar" mode="" />
        <view v-if="token" class="px-12">
          <image v-if="user.is_vip" src="@/static/img/vip.png" class="user-vip" />
          <view class="user-name">{{ user.nickname || '微信用户' }}</view>
        </view>
        <view v-else class="px-12">
          <view class="user-name text-info">点击登录~</view>
        </view>
      </view>
      <view class="flex justify-around py-20">
        <view class="" @click="navigateTo('/pages/user/order')">
          <view class="menu-round">
            <text class="iconfont icon-dingdan" />
          </view>
          <view class="text-15 mt-4">我的订单</view>
        </view>
        <view class="" @click="navigateTo('/pages/user/collect')">
          <view class="menu-round">
            <text class="iconfont icon-favor" />
          </view>
          <view class="text-15 mt-4">我的收藏</view>
        </view>
      </view>
    </view>
		
    <view class="">
      <view class="menu-item" @click="navigateTo('/pages/user/download')">
        <view class="iconfont icon-xiazai text-18" />
        <view class="menu-label">我的下载</view>
        <view class="iconfont icon-right" />
      </view>
      <view class="menu-item hair--y" @click="navigateTo('/pages/user/browse')">
        <view class="iconfont icon-shizhong text-18" />
        <view class="menu-label">我的浏览</view>
        <view class="iconfont icon-right" />
      </view>
      <view class="menu-item mb-12" @click="navigateTo('/pages/user/income')">
        <view class="iconfont icon-qiandai1 text-18" />
        <view class="menu-label">分佣所得</view>
        <view class="iconfont icon-right" />
      </view>
      <view class="menu-item mb-12" @click="navigateTo('/pages/user/info')">
        <view class="iconfont icon-my text-18" />
        <view class="menu-label">个人信息</view>
        <view class="iconfont icon-right" />
      </view>
      <view class="menu-item mb-12" @click="navigateTo('/pages/user/contact')">
        <view class="iconfont icon-service text-18" />
        <view class="menu-label">联系客服</view>
        <view class="iconfont icon-right" />
      </view>
    </view>
    <!-- #ifndef MP-WEIXIN -->
    <view v-if="token" class="p-20">
      <button class="round" type="warn" @click="onLogout">退 出 登 录</button>
    </view>
    <view v-else class="p-20">
      <button class="round" type="warn" @click="navigateTo('/pages/login/index')">去 登 录</button>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import avatar from '@/static/img/avatar.png'
export default {
  data() {
    return {
      avatar
    }
  },
  computed: {
    user() {
      return this.$store.state.userInfo
    },
    token() {
      return this.$store.state.token
    }
  },
  methods: {
    onLogout() {
      this.$f.showModal({
        title: '退出登录',
        content: '您确定要退出当前账户吗'
      }).then(res => {
        this.$f.clearToken()
        this.$Router.replaceAll('/pages/index/index')
      })
    },
    navigateTo(path) {
      if (this.token) {
        this.$Router.push(path)
      } else {
        this.$Router.push('/pages/login/index')
      }
    }
  }
}
</script>

<style lang="scss">
.user-info {
	padding: 32rpx;
}
.user-avatar {
	display: block;
	width: 120rpx;
	height: 120rpx;
	background-color: #8493A6;
	border-radius: 50%;
}
.user-vip {
	display: block;
	width: 128rpx;
	height: 30rpx;
	margin-bottom: 4rpx;
}
.user-name {
	font-size: 40rpx;
}
.menu-round {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88rpx;
	height: 88rpx;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #E7ECF2;
	.iconfont {
		color: $uni-primary;
		font-size: 48rpx;
	}
}
.menu-item {
	display: flex;
	align-items: center;
	height: 96rpx;
	padding: 0 30rpx;
	background-color: #fff;
	.icon-right {
		font-size: 28rpx;
		color: #8493A6;
	}
}
.menu-label {
	flex: 1;
	font-size: 32rpx;
	padding: 0 24rpx;
}
</style>
